<script setup>
import { onMounted, ref } from "vue";
// import HomeApis from "@/http/service/HomeApis";

const user = ref({});
const messages = ref([
  { id: 2, sender: 'AI助手', text: '你好，有什么可以帮助你的吗？' },
]);
const inputMessage = ref('');

const sendMessage = () => {
  if (inputMessage.value.trim()) {
    messages.value.push({
      id: messages.value.length + 1,
      sender: '当前用户',
      text: inputMessage.value,
    });
  }

  // HomeApis.xunFei({ text: inputMessage.value }).then(res => {
  //   messages.value.push({
  //     id: messages.value.length + 1,
  //     sender: 'AI助手',
  //     text: res.data.data,
  //   });
  // });

  inputMessage.value = '';
};

onMounted(() => {
  user.value = JSON.parse(localStorage.getItem('loginInfo'));
});

</script>

<template>
  <el-card class="chat-container">
    <!-- 聊天记录区域 -->
    <el-scrollbar style="height: calc(100vh - 350px);">
      <div class="chat-messages">
        <!-- 循环展示聊天消息 -->
        <div
            v-for="message in messages"
            :key="message.id"
            :class="message.sender === 'AI助手' ? 'message-bubble ai-assistant' : 'message-bubble self'"
        >
          <div class="sender">{{ message.sender }}</div>
          <div class="message-text">{{ message.text }}</div>
        </div>
      </div>
    </el-scrollbar>
    <!-- 输入框与发送按钮 -->
    <el-form class="chat-input">
      <el-form-item>
        <el-input
            type="textarea"
            placeholder="请输入消息..."
            v-model="inputMessage"
            :rows="4"
            class="chat-input"
            @keyup.enter="sendMessage"
            resize="none"
        ></el-input>
      </el-form-item>
      <el-button @click="sendMessage" type="primary" class="chat-sand">发送</el-button>
    </el-form>
  </el-card>
</template>

<style scoped>

.chat-container {
  display: flex;
  flex-direction: column;
  background-color: white;
  width: 1000px;
  margin: 20px auto;
}

.message-bubble {
  display: flex;
  margin: 0 auto 10px;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px;
  border-radius: 10px;
  max-width: 75%;
  background-color: #f3f6fa;
}

.self {
  align-items: flex-end;
  background-color: #d9e0ee;
}


.sender {
  font-size: 14px;
  color: #8c8c8c;
}

.message-text {
  margin-top: 5px;
  font-size: 16px;
  line-height: 1.5;
}


.chat-input {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 800px;
  margin: 0 auto;;
}
.chat-sand {
  height: 100px;
}
</style>